<template>
  
  <el-card :body-style="{ padding: '20px' }">
    <el-row>
      <div  class="person-info" v-if="approvalUser">
        <a v-if="showMembers" @click="handleShowMembers(approvalUser.idCard)">
          <img :src="approvalUser.idCardImg">
        </a>
        <img v-else :src="approvalUser.idCardImg">
        <div class="person-info-lf">
          <div class="info-row info-row">
            <div class="name">{{approvalUser.name}}</div>
          </div>
          <div class="info-row info-row-list">
            <div class="info-item">
              <span class="info-lable">性别：</span>
              <span class="info-content">{{approvalUser.sex}}</span>
            </div>
            <div class="info-item">
              <span class="info-lable">年龄：</span>
              <span class="info-content" v-if="approvalUser.age">{{approvalUser.age}}岁</span>
              <span class="info-content" v-else>暂无</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-lable">民族：</span>
              <span class="info-content">{{approvalUser.nationalityDisplay}}</span>
            </div>
          </div>
          <div class="info-row">
            <div class="info-item">
              <span class="info-lable">身份证号：</span>
              <span class="info-content"> {{approvalUser.idCard}}</span>
            </div>
          </div>
        </div>
      </div>
    </el-row>
  </el-card>
</template>
<script>

export default {
  props: ['approvalUser','showMembers'],
  data(){
    return {

    }
  },
  mounted() {
  },
  methods:{
    handleShowMembers(idCard){
      this.$router.push({
        name: "livingAllowancesDetail",
        params: { idCard: idCard}
      });
    }
  }
};
</script>
<style>
.person-info {
  padding: 20px;
  display: flex;
  height: 170px;
}

.person-info img {
  width: 100px;
  height: 130px;
}
.info-row-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.person-info-lf .info-lable {
  font-size: 14px;
  padding-right: 5px;
  display: inline-block;
  color: #b7b7b7;
}
.person-info-lf .info-content {
  font-size: 16px;
  padding-right: 5px;
  color: #676a6c;
}

.info .info-row .info-item .info-lable {
  font-size: 14px;
  padding-right: 5px;
  display: inline-block;
  color: #b7b7b7;
}
.person-info-lf {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: left;
  margin-left: 25px;
  color: #666;
  width: 400px;
  overflow: hidden;
}

.info .info-row {
  display: flex;
  justify-content: space-between;
}

.info-row .name {
  font-size: 24px;
  font-weight: 600;
  padding-right: 15px;
  color: #f8ac59;
  display: inline-block;
  height: 25px;
  line-height: 25px;
}

.info .info-row .info-item {
  flex-grow: 1;
}

.info .info-row .info-item .info-content {
  font-size: 16px;
  padding-right: 5px;
  display: inline-block;
}
</style>